//6给轮播数据
let arr = [
  { id: 1, weight: 4.5, rule: '5.2*2.1*2m', extraFee: 5, vol: 37.536, perPrice: 260, per: 15, srcImg: './img/1.png' },
  { id: 2, weight: 0.6, rule: '1.7*1.1*1m', extraFee: 3, vol: 1.87, perPrice: 28, per: 5, srcImg: './img/2.png' },
  { id: 3, weight: 1, rule: '2.7*1.4*1.2m', extraFee: 3.8, vol: 45, perPrice: 260, per: 5, srcImg: './img/3.png' },
  { id: 4, weight: 1, rule: '2*1.6*1.5m', extraFee: 3.6, vol: 4.8, perPrice: 49, per: 5, srcImg: './img/4.png' },
  { id: 5, weight: 4.5, rule: '2.6*1.5*1.8m', extraFee: 5, vol: 7.02, perPrice: 58, per: 5, srcImg: './img/5.png' },
  { id: 6, weight: 4.8, rule: '4.2*2*1.8m', extraFee: 5, vol: 15.12, perPrice: 73, per: 5, srcImg: './img/6.png' }
]
$( function() {
  //注意有顺序要求，且页面首次加载可能请求数据没有返回
  getCites()
  appendCites()
  clickTabToActive()
  initLoop()
  cityPullDown()
  maskClick()
  showMask()
})

//点击按钮区域
function showMask() {
  $('.left-aside-btn').click(function() {
    $('.mask').fadeIn()
    $('.userInfo').css({ 'left': '0', 'z-index': '10' })
  })
}

//遮罩层点击消失
function maskClick() {
  let mask = $('.mask')
  mask.click(function() {
	   event.stopPropagation()
    $(this).fadeOut()
    $('.userInfo').css({ 'left': '-2.5rem', 'z-index': '-10' })
  })
}

//动态拼接轮播图
function appendLoop() {
  let swiperWrapper = $('.swiper-wrapper')
  swiperWrapper.empty()
  arr.forEach(function(item) {
    let slide = `
      <div class="swiper-slide">
          <div class="info">
            <p><span>${item.perPrice}&nbsp;&nbsp;</span>(每${item.per}公里)</p>
            <div class="detail">
              <p>载重：${item.weight}吨</p>
              <p>长宽高：${item.rule}</p>
              <p>超公里费：${item.extraFee}元/公里</p>
              <p>容积：${item.vol}方</p>
            </div>
            <a href="#">在线下单 <span class="iconfont icon-youjiantou"></span> </a>
          </div>
          <img src="${item.srcImg}" alt="">
        </div>
    `
    swiperWrapper.append(slide)
  })
}

//城市下拉效果
function cityPullDown() {
  //点击city-wrap元素显示下拉列表
  $('.city-wrap').click(function() {
    $('.cityList').show()
  })
  //city-item点击隐藏cityList元素
  $('.city-item').on('click', function(e) {
    //阻止事件冒泡
    e.stopPropagation()
    $('.city').html($(this).text())
    $('.cityList').hide()
  })
}

//初始化轮播图
function initLoop() {
  appendLoop()
  let swiper = new Swiper('.swiper-container', {
    //水平切换方向
    direction: 'horizontal',
    //是否循环播放
    loop: true,
    //是否自动播放
    autoplay: { delay: 2000 },
    //分页器
    pagination: {
      el: '.swiper-pagination'
    }
  })
  $('.swiper-container').hover(function() {
    //鼠标悬停时停止轮播
    swiper.autoplay.stop()
  }, function() {
    //鼠标移除时开始轮播
    swiper.autoplay.start()
  })
}

//点击激活当前的tab元素
function clickTabToActive() {
  let tabs = $('.tab')
  tabs.click(function() {
    //获得被点击的tab的index
    let index = tabs.index(this)
    //设置所有的tab移除active的类样式
    tabs.removeClass('active')
    //给index位置的元素添加active类样式
    $(tabs[index]).addClass('active')
  })
}

//获得城市列表数据
function getCites() {
  $.get('https://kh-qg.oss-cn-hangzhou.aliyuncs.com/citys.json',
    function(res) {
      let provinces = res.provinces
      let cities = []
      provinces.forEach(function(item) {
        let arr = item.citys
        for (let i = 0, n = arr.length; i < n; i++) {
          cities.push(arr[i].citysName)
        }
      })
      sessionStorage.setItem('cities', JSON.stringify(cities))
    })
}

//拼接城市列表
function appendCites() {
  let cityList = $('.cityList')
  cityList.empty()
  let str = sessionStorage.getItem('cities')
  let cities = str ? JSON.parse(str) : []
  //遍历所有的数组元素拼接页面结构
  cities.forEach(function(item) {
    let li = `<li class='city-item'>${item}</li>`
    cityList.append(li)
  })
}
